import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js' // 控制器

const gui = new GUI()
gui.domElement.style.width = '300px' // 设置可视化面饭的样式

const scene = new THREE.Scene() // 场景
const geometry = new THREE.BoxGeometry(20, 20, 20) // 长方体
const material = new THREE.MeshPhongMaterial({
  color: 0xff00000,
  shininess: 20,// 高光部分亮度，默认30
  side: THREE.DoubleSide, // 矩形平面，圆形平面 两面可见，不设置则只有一面可见 ,不会影响立体图形
  specular: 0x444444 //高光部分的强度，
})
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, 0)
scene.add(mesh)
const axesHelper = new THREE.AxesHelper(350)
scene.add(axesHelper)

// 环境光场景  -- 环境光没有可视化
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)

const spotLight = new THREE.SpotLight(0xffffff, 1.0)
spotLight.decay = 0.0
spotLight.position.set(200, 150, 100)

const directionLight = new THREE.DirectionalLight(0xffffff, 1.0)
directionLight.position.set(50, 100, 80)
// directionLight.intensity = 2
scene.add(directionLight)

const width = window.innerWidth
const height = window.innerHeight

let fov = 30
const camera = new THREE.PerspectiveCamera(fov, width / height, 0.1, 3000)  // 角度，宽高比，近裁截面，远裁截面
camera.position.set(300, 300, 300)
camera.lookAt(0, 0, 0) // 改变相机的观察目标点  
const renderer = new THREE.WebGLRenderer({
  antialias: true // 启用抗锯齿
})
renderer.setSize(width, height) // canvas 画布的大小
// renderer.render(scene, camera) //渲染 生成了一个canvas对象
document.body.appendChild(renderer.domElement) //添加到页面上
let obj = {
  color: 0xffffff,
  y: null,
  x: null,
  bool: true
}
const clock = new THREE.Clock()
function render() {
  let setp = clock.getDelta() * 1000 // 两次之间的时间间隔
  let zhenlv = 1000 / setp // 渲染帧率
  if (obj.bool) {
    mesh.rotateY(0.01) // 网格对象环绕Y轴旋转 角度为0.01 ,每秒钟转动约60次
  }
  renderer.render(scene, camera) // scene,camera 是渲染器的属性
  window.requestAnimationFrame(render)
}
render()

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(100, 0, 100) // 注意 camera的lookAt 改变这里需要设置成一样的值
controls.update() // 注意 camera的lookAt 要加上这句代码
controls.addEventListener('change', function () {
  // renderer.render(scene, camera)
})
// window.onresize // 调整窗口大小的时候触发
window.onresize = function () {
  let width = window.innerWidth
  let height = window.innerHeight
  renderer.setSize(width, height) // 重新设置canvas的大小
  camera.aspect = width / height  // 设定相机的宽高比
  camera.updateProjectionMatrix() // 更新相机的投影矩阵
}

// name:名称 ， step 步长， 
gui.add(directionLight, 'intensity', 0, 2).name('平行光源强度').step(0.1)
gui.add(ambientLight, 'intensity', 0, 2).name('环境光源强度').step(0.1)
gui.add(mesh.position, 'x', 0, 1000).step(10)
gui.add(mesh.position, 'y', 0, 1000).step(10)
gui.add(mesh.position, 'z', 0, 1000).step(10).onChange(function (value) {
  console.log(value, 'vvv')
})

gui.addColor(obj, 'color').onChange(function (value) {
  mesh.material.color.set(value)
})
// 下拉菜单 - 数组形式
gui.add(obj, 'y', [-100, 0, 100]).onChange(function (value) {
  mesh.position.y = value
})
// 下拉菜单 - 对象形式
gui.add(obj, 'x', { left: -100, 中: 0, 右: 100 }).name('x轴').onChange(function (value) {
  mesh.position.x = value
})
// checkbox - 布尔值
gui.add(obj, 'bool').onChange(function (val) {
  console.log(val)
}).name('是否旋转')